import React from 'react'
import { connect } from 'dva'          
import { Breadcrumb,Icon,Row,Col,Avatar,Statistic,Card,Button,List } from 'antd';
import {Link} from 'dva/router.js'
import notices from './index/data/notices.js'   //这里暂时这么写，应该使用mock或者真实服务端
import moment from 'moment';
import Radar from './index/Radar';
import styles from './index/index.less'

import request from './../utils/request.js'

const radarOriginData = [{  //雷达图原始数据
        name: '个人',
        ref: 10,
        koubei: 8,
        output: 4,
        contribute: 5,
        hot: 7,
    },{
        name: '团队',
        ref: 3,
        koubei: 9,
        output: 6,
        contribute: 3,
        hot: 1,
    },{
        name: '部门',
        ref: 4,
        koubei: 1,
        output: 6,
        contribute: 5,
        hot: 7,
}];
const radarData = [];
const radarTitleMap = {
    ref: '引用',
    koubei: '口碑',
    output: '产量',
    contribute: '贡献',
    hot: '热度',
};
radarOriginData.forEach((item) => {
    Object.keys(item).forEach((key) => {
        if (key !== 'name') {
            radarData.push({
                name: item.name,
                label: radarTitleMap[key],
                value: item[key],
            });
        }
    });
});

const avatars2 = [  //头像组2
    'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
    'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
    'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',
    'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png',
    'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',
    'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
    'https://gw.alipayobjects.com/zos/rmsportal/psOgztMplJMGpVEqfcgF.png',
    'https://gw.alipayobjects.com/zos/rmsportal/ZpBqSxLxVEXfcUNoPKrz.png',
    'https://gw.alipayobjects.com/zos/rmsportal/laiEnJdGHVOhJrUShBaJ.png',
    'https://gw.alipayobjects.com/zos/rmsportal/UrQsqscbKEpNuJcvBZBu.png',
];
const activities = [{  //活动数据 list组件演示用
    id: 'trend-1',
    updatedAt: new Date(),
    user: {
        name: '曲丽丽',
        avatar: avatars2[0],
    },
    group: {
        name: '高逼格设计天团',
        link: 'http://github.com/',
    },
    project: {
        name: '六月迭代',
        link: 'http://github.com/',
    },
      template: '在 @{group} 新建项目 @{project}',
    },{
        id: 'trend-2',
        updatedAt: new Date(),
        user: {
        name: '付小小',
        avatar: avatars2[1],
    },
    group: {
        name: '高逼格设计天团',
        link: 'http://github.com/',
    },
    project: {
        name: '六月迭代',
        link: 'http://github.com/',
    },
        template: '在 @{group} 新建项目 @{project}',
    },{
        id: 'trend-3',
        updatedAt: new Date(),
        user: {
            name: '林东东',
            avatar: avatars2[2],
        },
        group: {
            name: '中二少女团',
            link: 'http://github.com/',
        },
        project: {
            name: '六月迭代',
            link: 'http://github.com/',
        },
        template: '在 @{group} 新建项目 @{project}',
    },{
        id: 'trend-4',
        updatedAt: new Date(),
        user: {
            name: '周星星',
            avatar: avatars2[4],
        },
        project: {
            name: '5 月日常迭代',
            link: 'http://github.com/',
        },
        template: '将 @{project} 更新至已发布状态',
    },{
        id: 'trend-5',
        updatedAt: new Date(),
        user: {
            name: '朱偏右',
            avatar: avatars2[3],
        },
        project: {
            name: '工程效能',
            link: 'http://github.com/',
        },
        comment: {
            name: '留言',
            link: 'http://github.com/',
        },
        template: '在 @{project} 发布了 @{comment}',
    },{
        id: 'trend-6',
        updatedAt: new Date(),
        user: {
            name: '乐哥',
            avatar: avatars2[5],
        },
        group: {
            name: '程序员日常',
            link: 'http://github.com/',
        },
        project: {
            name: '品牌迭代',
            link: 'http://github.com/',
        },
        template: '在 @{group} 新建项目 @{project}',
    },
];

class Home extends React.Component{
    constructor(props){
        super();
        this.state={
            links:[
                {title: '操作一',href: ''},
                {title: '操作二',href: ''},
                {title: '操作三',href: ''},
                {title: '操作四',href: ''},
                {title: '操作五',href: ''},
                {title: '操作六',href: ''}
            ]
        };
    }
	render(){     
		return (
            <div  className={`${styles.pageContent} ${styles.index}`}>
                {/* 头部 */}
                <div className={styles.pageHeader} style={{backgroundColor:"#fff"}}>
                    <Breadcrumb>
                        <Breadcrumb.Item href="/">
                            <Icon type="home" />
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            Index   
                        </Breadcrumb.Item>
                    </Breadcrumb>
                    <div>
                        <p className={styles.pageHeaderTitle}>
                            工作台
                        </p>
                        <Row style={{margin:"10px 0 0 0"}}>
                            <Col span={14}>
                                <div style={{display:"flex",flexDirection:"row"}}>
                                    <div className={styles.avatar}>
                                        <Avatar
                                            src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" 
                                            size="large" />    
                                    </div>
                                    <div style={{marginLeft:"20px"}}>
                                        <p className={styles.hello}>早安，Sky D，祝你开心每一天！</p>
                                        <p>交互专家 | 上海润和－金融平台部－大数据事业部－UED</p>
                                    </div>
                                </div>
                            </Col>
                            <Col span={10} className={styles.extraContent}>
                                <Statistic title="项目数" value={56} />
                                <Statistic title="团队内排名" value={8} suffix="/ 24" />
                                <Statistic title="项目访问" value={2223} />
                            </Col>
                        </Row>
                    </div>
                </div>
                {/* body */}
                <div style={{margin:"24px 24px 0"}}>
                    <Row gutter={24}>
                        {/* xl 超大屏幕 左侧 */}
                        <Col xl={16} lg={24} md={24} sm={24} xs={24}>
                            <Card
                                className={styles.projectList}
                                style={{
                                    marginBottom: 24,
                                }}
                                title="进行中的项目"
                                bordered={false}
                                extra={<Link to="/">全部项目</Link>}                            
                                bodyStyle={{
                                    padding: 0,
                                }} >
                                {notices.map((item) => (
                                    <Card.Grid  key={item.id}>
                                        <Card
                                            bodyStyle={{
                                                padding: 0,
                                            }}
                                            bordered={false}>
                                            <Card.Meta
                                            title={
                                                <div >
                                                    <Avatar size="small" src={item.logo} />
                                                    <Link to={item.href}>{item.title}</Link>
                                                </div>
                                            }
                                            description={
                                                <div style={{height:"42px",overflow:"hidden"}}>
                                                    {item.description}
                                                </div>
                                            }
                                            />
                                            <div >
                                                <Link to={item.memberLink}>{item.member || ''}</Link>
                                                {item.updatedAt && (
                                                    <span  title={item.updatedAt}>
                                                    {moment(item.updatedAt).fromNow()}
                                                    </span>
                                                )}
                                            </div>
                                        </Card>
                                    </Card.Grid>
                                ))}
                            </Card> 
                            <Card
                                bodyStyle={{
                                    padding: 0,
                                }}
                                bordered={false}                              
                                title="动态"
                                >
                                 <List                                  
                                    renderItem={(item) => this.renderActivities(item)}
                                    dataSource={activities}
                                    className={styles.activitiesList}
                                    size="large"
                                />  
                            </Card>   
                        </Col>
                        {/* xl 超大屏幕 左侧 */}
                        <Col xl={8} lg={24} md={24} sm={24} xs={24}>
                            <Card
                                style={{
                                    marginBottom: 24,
                                }}
                                title="快速开始 / 便捷导航"
                                bordered={false}
                                bodyStyle={{
                                    padding: 0,
                                }}>
                                <div className={styles.links}>
                                    {
                                        this.state.links.map(function(link,index){
                                            return React.createElement(Link,{
                                                key: `linkGroup-item-${link.id || link.title}`,
                                                to:link.href,
                                                href: link.href
                                            },link.title)
                                        })
                                    }
                                    <Button type="link">
                                        <Icon type="plus" /> 添加
                                    </Button>
                                </div>
                            </Card>
                            <Card
                                style={{
                                    marginBottom: 24,
                                }}
                                title="XX 指数"
                                >
                                <Radar hasLegend height={343} data={radarData} />        
                            </Card>
                            <Card
                                bodyStyle={{
                                    paddingTop: 12,
                                    paddingBottom: 12,
                                }}
                                bordered={false}
                                title="团队"
                                >
                                    <div className="members">
                                    <Row gutter={48}>
                                    {notices.map((item) => (
                                        <Col span={12} key={`members-item-${item.id}`}>
                                        <Link to={item.href}>
                                            <Avatar src={item.logo} size="small" />
                                            <span className={styles.members}>{item.member}</span>
                                        </Link>
                                        </Col>
                                    ))}
                                    </Row>
                                </div>
                            </Card>
                        </Col>
                    </Row> {/* end of row */}   
                </div>    
            </div>
		)
    }
    renderActivities = (item) => {
        const events = item.template.split(/@\{([^{}]*)\}/gi).map((key) => {
            if (item[key]) {
                return (
                    <a href={item[key].link} key={item[key].name}>
                        {item[key].name}
                    </a>
                );
            }    
            return key;
        });
        return (
            <List.Item key={item.id}>
                <List.Item.Meta
                    avatar={<Avatar src={item.user.avatar} />}
                    title={
                        <span>
                          <a className="username">{item.user.name}</a>
                          &nbsp;
                          <span className="event">{events}</span>
                        </span>
                    }
                    description={
                        <span className="datetime" title={item.updatedAt}>
                          {moment(item.updatedAt).fromNow()}
                        </span>
                    } />
            </List.Item>
        );
    };
    componentDidMount(){
        request("http://localhost:8094/point/getAllPoints?tableName=yuntu_orgdt_beijing_user_heat_map_info",{},(da)=>{ //成功
            console.log(da);    
        },function(err){  //可能是网络错误，也有可能是业务错误
            console.log(err);
        },"POST");
    } 
}
export default connect(function(state){
	return {
		user:state.app.user
	}
})(Home)